<%-- 
    Document   : viewTables
    Created on : 22-feb-2014, 17:37:40
    Author     : Juan
--%>

<%@page import="java.util.List"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <%@include file="../disenoWeb/title.html" %>
        <meta charset="utf-8">
        <%@include file="../disenoWeb/head.html" %>
        <script src="../disenoWeb/js/formulario.js" type="text/javascript"></script>			
        <script type="text/javascript" src="../disenoWeb/js/excel.js"></script>
        <script type="text/javascript" src="../disenoWeb/js/jquery.min.js"></script>
        <script type="text/javascript" src="../disenoWeb/js/jquery-ui.min.js"></script>

        <link rel="stylesheet" type="text/css" href="../disenoWeb/jquery-ui/css/redmond/jquery-ui-1.8.4.custom.css"/>
        <link rel="stylesheet" type="text/css" href="../disenoWeb/jquery-ui/css/ui-lightness/jquery-ui-1.8.4.custom.css"/>
        <link rel="stylesheet" type="text/css" href="../disenoWeb/jquery-ui/css/smoothness/jquery-ui-1.8.4.custom.css"/>
        <link rel="stylesheet" type="text/css" href="../disenoWeb/jquery-ui/css/flick/jquery-ui-1.8.4.custom.css" id="link"/>
        <link rel="stylesheet" type="text/css" href="../disenoWeb/css/base.css" />

        <!-- Ventana Emergente -->
        <link rel="stylesheet" type="text/css" href="../disenoWeb/css/ventanaEmergente.css" />
        <!-- -->

        <script type="text/javascript" src="../disenoWeb/highlighter/codehighlighter.js"></script>	
        <script type="text/javascript" src="../disenoWeb/highlighter/javascript.js"></script>			
        <script type="text/javascript" src="../disenoWeb/javascript/jquery.fixheadertable.js"></script>		
        <script>
            /*Ventana emergente*/
            $(document).ready(function() {
                $("#b2").click(function() {
                    $("#dialogo2").dialog({
                        width: 590,
                        height: 350,
                        show: "scale",
                        hide: "scale",
                        resizable: "false",
                        position: "center"
                    });
                });
            });
        </script>

        <%            /*Se obtiene el valor de la variable de session 'muestra', para saber que se debe de mostrar*/
            String mostrar = (String) session.getAttribute("muestra");
            String orgG0 = "";
            String opcion = "";

            /*Se captura toda la información necesaria para descargar la red de entrada*/
            String redEntrada = (String) session.getAttribute("tituloFObligatorio");
            String org = (String) session.getAttribute("carpeta");

            if (session.getAttribute("carpetag") != null) {
                orgG0 = (String) session.getAttribute("carpetag");
            }
            if (session.getAttribute("opcionElegida") != null) {
                opcion = (String) session.getAttribute("opcionElegida");
            }
            String cssTablas = "";
            if (mostrar.equals("comparar")) {
                cssTablas = "position : relative;"
                        + " margin-left : 0.25%;"
                        + " font-family : Verdana,Arial,Geneva,Helvetica,sans-serif;"
                        + " font-size: 10px;";
        %>
        <script type="text/javascript">
            $(document).ready(function() {

                $.ajax({
                    url: '../comparacion/viewComparison.jsp',
                    success: function(data) {
                        $('#0').html(data).fixheadertable({
                            caption: 'Pathways', //Titulo de la tabla
                            colratio: [350, 100, 100, 100, 100, 100, 100, 100, 100, 80, 80], //Numero de columnas y tamaño de estas en la tabla de Comparacion
                            height: 270, //Altura de la tabla
                            width: 1330, //Anchura de la tabla
                            zebra: true, //Tabla tipo zebra
                            sortable: true, //Opcion ordenable
                            sortedColId: 0, //Columna que aparece ordenada por defecto
                            resizeCol: true, //Opcion de cambiar el tamaño a las columnas dinamicamente
                            pager: true, //Paginacion
                            rowsPerPage: 10, //Numero de filas por pagina
                            sortType: ['string', 'string', 'string', 'string', 'string', 'string', 'string', 'string', 'string', 'string', 'string']//Tipo de los valores 
                        });
                        //Ocultar el div con id=loader-image
                        $('#loader-image').hide();

                        //Mostrar los div con id=encima-tabla, id=debajo-tabla, id=b2
                        $('#encima-tabla').show();
                        $('#debajo-tabla').show();
                        $('#b2').show();
                    }
                });

            });



        </script>	
        <%} else if (mostrar.equals("enrichNet")) {
            cssTablas = "position : relative;"
                    + " margin-left : 0.25%;"
                    + " font-family : Verdana,Arial,Geneva,Helvetica,sans-serif;"
                    + " font-size: 10px;";
        %>
        <script type="text/javascript">
            $(document).ready(function() {

                $.ajax({
                    url: '../enrichNet/viewEnrichNet.jsp',
                    success: function(data) {
                        $('#0').html(data).fixheadertable({
                            caption: 'Redes', //Titulo de la tabla
                            colratio: [340, 129, 129, 129, 132, 129, 129, 129], //Numero de columnas y tamaño de estas en la tabla de Enriquecimiento de Redes
                            height: 270, //Altura de la tabla
                            width: 1250, //Anchura de la tabla
                            zebra: true, //Tabla tipo zebra
                            sortable: true, //Opcion ordenable
                            sortedColId: 0, //Columna que aparece ordenada por defecto
                            resizeCol: true, //Opcion de cambiar el tamaño a las columnas dinamicamente
                            pager: true, //Paginacion
                            rowsPerPage: 10, //Numero de filas por pagina
                            sortType: ['string', 'string', 'string', 'string', 'string', 'string', 'string', 'string']//Tipo de los valores
                        });
                        //Ocultar el div con id=loader-image
                        $('#loader-image').hide();

                        //Mostrar los div con id=encima-tabla, id=debajo-tabla, id=b2
                        $('#encima-tabla').show();
                        $('#debajo-tabla').show();
                        $('#b2').show();
                    }
                });
            });



        </script>	
        <% } else if (mostrar.equals("enrich")) {
            cssTablas = "position : relative;"
                    + " margin-left : 0.25%;"
                    + " font-family : Verdana,Arial,Geneva,Helvetica,sans-serif;"
                    + " font-size: 10px;"
                    + " margin-left: 0.5%";%>
        <script type="text/javascript">
            $(document).ready(function() {

                $.ajax({
                    url: '../enrichAnalysis/viewEnrich.jsp',
                    success: function(data) {
                        $('#0').html(data).fixheadertable({
                            caption: 'Enrichment Analysis', //Titulo de la tabla
                            colratio: [500, 250, 250, 300], //Numero de columnas y tamaño de estas en la tabla de Enriquecimiento de Analisis
                            height: 270, //Altura de la tabla
                            width: 1320, //Anchura de la tabla
                            zebra: true, //Tabla tipo zebra
                            sortable: true, //Opcion ordenable
                            sortedColId: 0, //Columna que aparece ordenada por defecto
                            resizeCol: true, //Opcion de cambiar el tamaño a las columnas dinamicamente
                            pager: true, //Paginacion
                            rowsPerPage: 10, //Numero de filas por pagina
                            sortType: ['string', 'string']//Tipo de los valores
                        });
                        //Ocultar el div con id=loader-image
                        $('#loader-image').hide();

                        //Mostrar los div con id=encima-tabla, id=debajo-tabla, id=b2
                        $('#encima-tabla').show();
                        $('#debajo-tabla').show();
                        $('#b2').show();
                    }
                });
            });



        </script>	
        <% }

        %>


        <script type="text/javascript" src="../disenoWeb/js/excel.js"></script>	

    </head>

    <body style="background-color : #FFFFFF; overflow-x : hidden" onload="ocultaExcel()">
        <!--==============================header=================================-->
        <header>
            <%@include file="../disenoWeb/divHeader.jsp" %>
            <div class="menu-row">
                <div class="menu-bg">
                    <div class="main">
                        <nav class="indent-left">
                            <ul class="menu wrapper">
                                <%@include file="menuTablas.jsp" %>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="row-bot">
                <div class="center-shadow">
                </div>
            </div>
        </header>

        <!--  EXAMPLES -->

        <div style="<%=cssTablas%>">

            <div id="loader-image" class="loader">
                <img src="../disenoWeb/images/loader.gif"/>
            </div>

            <!-- Información sobre la tabla -->
            <div id="encima-tabla">

                <div class="contenido-ventana">

                    <% String nombreRed = redEntrada.substring(0, redEntrada.length() - 4);
                        String titulo = "";

                        if (opcion.equals("sif")) {

                            titulo = redEntrada.substring(1, redEntrada.length() - 4);
                        } else {
                            titulo = nombreRed;

                        }%>



                    <div id="dialogo2" class="ventana"  title="<%=titulo.toUpperCase()%>">

                        <!-- Ver Grafo de Red de entrada -->
                        <% if (mostrar.equals("comparar") || mostrar.equals("enrichNet")) {%>
                        <form id='view-ventana-form' action='../utilidades/graphNet.jsp' method='post'>
                            <input name='opcionRedEntrada' id='opcionRedEntrada' type='hidden' value='redEntrada'/>
                            <input name='tituloP' id='tituloP' type='hidden' value='<%=nombreRed%>'/>
                            <b><u>View graph:</u></b> <input class='view-ventana-button' style="width: 30px; height: 20px; margin-left: 15px;" title='View graph' name='nameTitulo' id='nameTitulo' formtarget='_blank' type='submit' value=''/>
                        </form>
                        <% } %>

                        <% if (opcion.equals("go")) {
                                session.setAttribute("userGO", "yes");

                            }
                            if (opcion.equals("kegg")) {
                        %>
                        <b><u>Organism:</u></b> <%=org%></br>
                                <%}
                                    if (opcion.equals("go")) {%>

                        <b><u>Organism:</u></b> <%=orgG0%></br>
                                <%}
                                %>            

                        <%
                            List genes = (List) session.getAttribute("genes");%>
                        <b><u>Number of genes:</u></b> <%=genes.size()%>
                        </br>




                        <b><u>List of genes:</u></b>
                                <%
                                    String listaGenesString = "</br>";
                                    if (genes != null) {
                                        for (int i = 0; i < genes.size(); i++) {
                                            listaGenesString += genes.get(i);
                                            listaGenesString += "</br>";
                                        }
                                    }
                                    out.print(listaGenesString);

                                %>

                    </div>
                </div>
                <% if (mostrar.equals("enrich")) {%>
                <div id="b2" class="boton-ventana">Entry Genes List <img width="20px" height="20px" src="../disenoWeb/images/information.png" alt="View information of entry Genes List"/>
                    <%} else {%>
                    <div id="b2" class="boton-ventana">Entry Network <img width="20px" height="20px" src="../disenoWeb/images/information.png" alt="View information of entry net"/>
                        <%}%>
                    </div>


                </div>

                <!-- Tabla de valores -->
                <table class="resultset" id="0">

                </table>

                <!-- Otra información -->
                <div id="debajo-tabla">

                </div>
            </div>

            <!--==============================footer=================================-->
            <footer>
                <%@include file="../disenoWeb/footer.html" %>
            </footer>
            <script type="text/javascript"> Cufon.now();</script>
    </body>



</html>

